<script setup>
import {get} from "@/net";
import {ElMessage} from "element-plus";
import router from "@/router";
import {useStore} from "@/stores/userStore";
import {weatherStore} from "@/stores/weatherStore";
import {locationStore} from "@/stores/locationStore";
import {User, Document, House, Setting} from "@element-plus/icons-vue";

const store = useStore()
const weather_store = weatherStore()
const location_store = locationStore()

const logout = () => {
    get('/api/auth/logout', (message) => {
        ElMessage.success(message)
        store.auth.user = null
        weather_store.api.weather = null
        location_store.api.location = null
        router.push('/')
    })
}
</script>

<template>
    <div style="width: 100vw;height: 100vh;overflow: hidden;display: flex;flex-direction: column">
        <div class="header">
            <div style="margin: 5px 5px;text-align: center">
                <el-row style="width: 100%;">
                    <el-col :span="22">
                        <span style="color: white;font-size: 18px;font-weight: bolder;position: relative;top: 3px">欢迎{{store.auth.user.username}}进入在线投票平台！</span>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="logout" type="danger" style="line-height: 50px">退出登录
                        </el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="content" style="display: flex;flex-direction: row">
            <div class="menu">
                <el-row class="tac">
                    <el-col>
                        <el-menu
                                active-text-color="#ff5900"
                                background-color="#dbdbdb"
                                default-active="1"
                                text-color="#000000"
                        >
                            <el-menu-item index="1" @click="router.push('/index')">
                                <el-icon>
                                    <House/>
                                </el-icon>
                                <span>首页</span>
                            </el-menu-item>
                            <el-menu-item index="2" @click="router.push('/index/user')">
                                <el-icon>
                                    <User/>
                                </el-icon>
                                <span>用户管理</span>
                            </el-menu-item>
                            <el-menu-item index="3" @click="router.push('/index/singer')">
                                <el-icon>
                                    <document/>
                                </el-icon>
                                <span>歌手管理</span>
                            </el-menu-item>
                            <el-menu-item index="4" @click="router.push('/index/game')">
                                <el-icon>
                                    <setting/>
                                </el-icon>
                                <span>比赛管理</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>
            <el-scrollbar max-height="1600px">
                <router-view v-slot="{ Component }">
                    <transition name="el-fade-in-linear" mode="out-in">
                        <component :is="Component" style="height: 100%"/>
                    </transition>
                </router-view>
            </el-scrollbar>
        </div>
    </div>
</template>

<style scoped>
.header {
    width: 100%;
    height: 50px;
    background-color: #8c9bf9;
}

.content {
    height: 100%;
    width: 100%;
}

.menu {
    height: 100vh;
    width: 150px;
    background-color: #dbdbdb;
}
</style>